<template>
  <div class="container with-nav-padding">
    <div class="bd-img">
      <img :src="vip_rigths" alt />
    </div>
    <div v-if="arrowMask" @click.stop="arrowMask = false" class="arrow-mask">
      <img src="@/assets/商品分享-引导-assets/0.png" alt />
    </div>
    <!-- <div style="margin-top:0.48rem;" class="item-panel_small-img">
      <item-small-img v-for="item in goodList" :item="item"></item-small-img>
    </div>
    <load-more @loadMore="loadMore"></load-more>-->
    <div class="immInviteBtn" :class="{ 'fullscreen-bottom-style': isFullscreen }">
      <button
        @click="
          $router.push({
            path: '/register',
            query: { invite_code: $route.query.invite_code }
          })
        "
        v-if="$route.query.invite_code"
        :style="{background: mainColor}"
      >立即注册</button>
      <button
        v-else
        class="copyInviteCode"
        @touchmove.stop
        @click="arrowMask = true"
        :style="{background: mainColor}"
      >立即邀请</button>
    </div>
  </div>
</template>

<script>
import itemSmallImg from "@/components/item-small-img.vue";
import loadMore from "@/components/load-more";
import { getRecommendGood } from "@/api/mall";
import { getVipDetail, getVipGood } from "@/api/vip";
import { mapState } from "vuex";
import { getWXSDK } from "@/api/wx";
import wx from "weixin-js-sdk";
export default {
  data() {
    return {
      inviteImg: "",
      inviteCode: "",
      arrowMask: false,
      vip_share_info: "",
      vip_share_title: "",
      isAll: false,
      loading: false,
      goodList: [],
      page: 1
    };
  },
  computed: {
    ...mapState({
      entryUrl: state => state.app.entryUrl,
      logo: state => state.app.logo,
      isMiniProgram: state => state.app.isMiniProgram,
      isFullscreen: state => state.app.isFullscreen,
      mainColor: state => state.app.mainColor,
      vip_rigths: state => state.app.vip_rigths
    })
  },
  methods: {
    onShareVip() {
      // let title = '分享标题';
      // let desc = '分享描述';
      let _this = this;
      let title = this.vip_share_title;
      let desc = this.vip_share_info;
      let imgUrl = this.logo;
      let link =
        window.location.href.split("#")[0] +
        "static/redirect.html?app3Redirect=" +
        encodeURIComponent(
          `${window.location.href.split("#")[0]}#${
            window.location.href.split("#")[1].split("?")[0]
          }?invite_code=${this.inviteCode}`
        );
      // console.log(link);
      // console.log(_this.inviteCode);
      wx.onMenuShareAppMessage({
        title, // 分享标题
        desc, // 分享描述
        link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl, // 分享图标
        type: "link", // 分享类型,music、video或link，不填默认为link
        dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
        success: res => {
          _this.arrowMask = false;
          this.$dialog.toast({
            mes: "分享成功",
            timeout: 1500,
            icon: "success"
          }); // 用户确认分享后执行的回调函数
          // console.log("分享给朋友成功返回的信息为:", res);
        },
        cancel: function(res) {
          _this.arrowMask = false;
          // 用户取消分享后执行的回调函数
          // console.log("取消分享给朋友返回的信息为:", res);
        }
      });

      //分享到朋友圈
      wx.onMenuShareTimeline({
        title, // 分享标题
        link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl, // 分享图标
        success: function(res) {
          _this.arrowMask = false;
          // 用户确认分享后执行的回调函数
          // console.log("分享到朋友圈成功返回的信息为:", res);
        },
        cancel: function(res) {
          _this.arrowMask = false;
          // 用户取消分享后执行的回调函数
          // console.log("取消分享到朋友圈返回的信息为:", res);
        }
      });
    },
    inviteUrl() {
      return window.location.href + "?invite_code=" + this.inviteCode;
    }
    // getVipGood(id, page) {
    //   getRecommendGood({
    //     page
    //   }).then(res => {
    //     if (res.status === 200) {
    //       if (page === 1) this.goodList = [];
    //       this.goodList.push(...res.data.data);
    //       if (res.data.data.length === 0) {
    //         this.isAll = true;
    //         this.$dialog.toast({
    //           mes: "已经到最底了",
    //           timeout: 1000
    //         });
    //       }
    //     }
    //     this.loading = false;
    //   });
    // },
    // loadMore() {
    //   if (this.loading || this.isAll || this.goodList.length === 0) return;
    //   this.loading = true;
    //   this.getVipGood(this.currentLevel, ++this.page);
    // }
  },

  components: {
    loadMore,
    itemSmallImg
  },
  // beforeRouteEnter (to, from, next) {
  //   // ...
  //   if (from.path.includes('invite_code')) {
  //     let code = from.path.split('invite_code=')[1]
  //     this.$router.replace({path: '/register', query: {invite_code: code}})
  //   }
  //   next()
  // },
  created() {
    // this.getVipGood(1);
    getVipDetail({ type: 1 }).then(res => {
      if (res.status === 200) {
        this.inviteImg = res.data.data.image;
        this.inviteCode = res.data.data.invite_code;
        this.vip_share_title = res.data.data.vip_share_title;
        this.vip_share_info = res.data.data.vip_share_info;
        if (this.isMiniProgram) {
          let postData = {
            url:
              window.location.href.split("#")[0] +
              "static/redirect.html?app3Redirect=" +
              encodeURIComponent(
                `${window.location.href.split("#")[0]}#${
                  window.location.href.split("#")[1].split("?")[0]
                }?invite_code=${this.inviteCode}`
              ),
            title: this.vip_share_title
          };
          wx.miniProgram.postMessage({ data: JSON.stringify(postData) });
        }
        let signLink = /(Android)/i.test(navigator.userAgent)
          ? location.href.split("#")[0]
          : this.entryUrl;
        getWXSDK({ shareurl: signLink }).then(res => {
          if (res.status === 200) {
            let data = res.data.data;
            wx.config({
              debug: false,
              appId: data.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
              timestamp: data.timestamp, // 必填，生成签名的时间戳
              nonceStr: data.nonceStr, // 必填，生成签名的随机串
              signature: data.signature, // 必填，签名，见附录1
              jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"]
            });
            //处理验证失败的信息
            wx.error(function(res) {
              console.log("验证失败返回的信息:", res);
            });
            //处理验证成功的信息
            wx.ready(() => {
              console.log("验证完成");
              this.onShareVip();
            });
          }
        });
      }
    });
  }
};
</script>

<style lang="less" scoped>
.container {
  padding-bottom: 3rem;

  .clear {
    clear: both;
  }

  .immInviteBtn {
    width: 100;
    line-height: 2rem;
    text-align: center;
    left: 0;
    position: fixed;
    bottom: 0rem;
    width: 100%;
    background: #fff;
    border-top: 1px solid #dfdfdf;
    padding: 0 3.2%;
    button {
      font-size: 0.64rem;
      color: #ffffff;
      background: #3393ff;
      border-radius: 0.24rem;
      width: 100%;
      border: none;
      height: 1.44rem;
      margin: 0.28rem 0;
    }
  }
  .arrow-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    text-align: right;
    z-index: 99999;
    img {
      margin-right: 9%;
    }
  }
}
</style>
